<!--
 * @Author: Wangtao
 * @Date: 2020-09-21 09:55:09
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-03-23 15:25:13
-->
<template>
  <div class='handle-wrapper-con clearfix' :class="isNoTabs?'no-tabs-box':''">
    <div :class="{'handle-wrapper': true, shadow: shadow}"  v-show="!showPage">
      <div v-if="isShowTree" class="hanle-wrapper-tree fl">
        <slot name="tree"></slot>
      </div>
      <div class="handle-wrapper-header" :class="{fl: isShowTree}" :style="{width: isShowTree ? 'calc(100% - 200px)' : ''}">
        <div class="header-contain">
          <div class="search-box">
            <slot name="search"></slot>
          </div>
          <div class="oprate">
            <slot name="oprate"></slot>
          </div>
        </div>
      </div>
      <div class="content" :class="{fl: isShowTree}" :style="{width: isShowTree ? 'calc(100% - 200px)' : '', height: contentHeight}">
        <slot name="content"></slot>
      </div>
    </div>
    <div :class="{'page': true, shadow: pageshadow}" v-if="showPage">
      <slot name="page"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  name: 'HandleWrapper'
})

export default class HandleWrapper extends Vue {
  @Prop({ default: false }) private showPage!: boolean
  @Prop({ default: false }) private isNoTabs!: boolean
  @Prop({ default: true }) private shadow!: boolean
  @Prop({ default: false }) private pageshadow!: boolean
  @Prop({ default: false }) private isShowTree!: boolean
  @Prop({ default: 'calc(100% - 98px)' }) private contentHeight: string | undefined
  private breadcrumbBack () {
    this.$emit('pageBack')
  }
}
</script>

<style lang="stylus" scoped>
.oprate
  display flex
.page
  position absolute
  width 100%
  height 100%
  left 0
  top 0
  z-index 100
  background white
.hanle-wrapper-tree
  width 200px
  height 100%
  border-right 1px solid $border-main
  padding 16px 16px 0px 16px
  overflow-x scroll
.handle-wrapper-con
  height calc(100% - 40px)
.no-tabs-box
  height 100%
  position relative
.shadow
  border 1px solid $border-main
  box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
  border-radius: 10px
  overflow hidden
.handle-wrapper
  padding 0
  border-radius 10px
  height 100%
  overflow auto
  box-sizing border-box
  margin 0 2px 2px 0
  .handle-wrapper-header
    padding 16px 16px 0 16px
    .header-contain
      width 100%
      height 100%
      display flex
      justify-content space-between
      align-items center
      border-bottom 1px solid $border-main
  .content
    padding 0 16px 0
    box-sizing border-box
  .nav
    height 42px
  .search-box
    display flex
    align-items center
  .search
    display flex
    align-items center
    border-radius 4px
    padding 0 10px 0
    height 32px
    font-size $font-size-small
</style>
